<template>
  <div class="add">
    <div class="account-search">
      <div class="account-input">
        <el-input v-model="input2" :placeholder="valueName">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <el-row style="margin: 10px 0;">
      <el-col :sm="4">
        <div class="g-title">技术支持数目({{ total }}个）</div>
      </el-col>
      <el-col :sm="20" style="text-align:right;padding: 5px 0 0 0;" v-show="rolesNode">
        <el-button type="primary" @click="add" size="small">新增</el-button>
        <el-button type="warning" @click.prevent="delData()" size="small">删除</el-button>
        <el-button type="success" @click.prevent="modify()" size="small">修改</el-button>
      </el-col>
    </el-row>
    <div class="table-top">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="200" align="center"></el-table-column>
        <el-table-column prop="job" label="工作描述" width="600" align="center"></el-table-column>
      </el-table>

      <el-row style="padding: 32px 16px;">
        <el-col>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="pageSize"
            :total="total"
            :current-page="pageNo"
            @current-change="fetchData"
            @size-change="pageSizeChange"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>

    <add
      :dialogVisible.sync="dialogVisible"
      :data="editData"
      :addMode="addMode"
      @finish="fetchData"
    ></add>
  </div>
</template>
<script>
import MyTableTitle from "@/components/search/tableTitle";
import Add from "./components/add";
import { axios } from "@/api/axios";
// 引入vuex
import { mapGetters } from "vuex";
export default {
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["userInfo", "selectedComIds"]),
  },
  components: {
    MyTableTitle,
    Add,
  },
  data() {
    return {
      valueName: "请输入姓名",
      rolesNode: false, //单位权限只有管理员和单位管理员可以为true
      userid: "", //用户ID
      editData: {},
      tableData: [],
      ruleForm: {
        title: "",
        IssuedBy: "",
        titleNode: "",
      },
      input2: "",
      addMode: false,
      multipleSelection: [],
      currentPage: 1, //默认显示第一页
      pageSize: 10, //默认每页显示10条
      total: 1,
      pageNo: 1,
      dialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
    };
  },
  created() {
    this.fetchData();
    this.comid = this.userInfo.comid;
    this.userid = this.userInfo.userid;
    this.roles();
  },
  methods: {
    roles() {
      if (this.userInfo.usertype == 1) {
        this.rolesNode = true;
      }
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    // // 下载
    // toDocument(index, row) {
    //   window.location.href = row.fujianurl;
    // },
    // 搜索
    search() {
      this.fetchData();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    fetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      axios("/admin/linkman/findAllLinkmans1.do", "get", {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        name: this.input2,
        companyId: this.comid,
        type: 4,
        // comIds: this.selectedComIds.join(",")
      }).then((data) => {
        this.tableData = data.data;
        this.total = data.total;
      });
    },
    add() {
      this.addMode = true;
      this.dialogVisible = true;
    },
    // 删除
    delData() {
      if (this.multipleSelection.length == 0) {
        this.$message("请选择");
        return;
      }
      this.$confirm("是否确定删除数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          let val = this.multipleSelection;
          let nid = "";
          val.forEach((e) => {
            nid += e.id + ",";
          });
          nid =
            nid.substring(nid.length - 1) == ","
              ? nid.substring(0, nid.length - 1)
              : nid;
          axios("/admin/linkman/removeLinkmanById.do", "post", {
            ids: nid,
            userId: this.userid,
          }).then((data) => {
            this.fetchData();
          });
        }
      });
    },
    //  修改
    modify() {
      if (this.multipleSelection.length == 0) {
        this.$message("请选择");
        return;
      }
      this.editData = {
        id: this.multipleSelection[0].id,
        name: this.multipleSelection[0].name,
        phone: this.multipleSelection[0].phone,
        job: this.multipleSelection[0].job,
        userId: this.userId,
      };
      this.$refs.multipleTable.clearSelection();
      this.addMode = false;
      this.dialogVisible = true;
    },
  },
};
</script>
<style></style>
